import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { routerRedux, Link } from 'dva/router';
import querystring from 'querystring';
import {
  Form,
  Input,
  Card,
  message,
  Button,
  Spin,
  Radio,
} from 'antd';

import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import CustomerList from '../../../components/Falcon/CustomerList';

import styles from './style.less';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ risk }) => ({
  risk,
}))
@Form.create()
export default class PreCheck extends PureComponent {
  state = {
    projectId: '',
    taskId: '',
  };
  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    this.setState({
      projectId: params.id,
      taskId: params.taskId,
    });
    dispatch({
      type: 'risk/showScreen',
      payload: {
        projectId: params.id,
      },
    });

    window.addEventListener('resize', this.resizeFooterToolbar);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.resizeFooterToolbar);
  }

  handleCommitScree = code => {
    const { dispatch } = this.props;
    const { validateFieldsAndScroll } = this.props.form;
    let result = null;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        if (values.resultCode == 1) {
          result = '正常';
        }
        if (values.resultCode == 2) {
          result = '关注';
        }
        if (values.resultCode == 3) {
          result = '建议禁入';
        }
        dispatch({
          type: 'risk/commitScreen',
          payload: {
            projectId: this.state.projectId,
            taskId: this.state.taskId,
            content: values.content,
            result: result,
            resultCode: code,
          },
          callback: () => {
            const { risk: { riskResult } } = this.props;
            if (riskResult.code == 200) {
              message.success('提交成功');
              dispatch(routerRedux.push('/risk/preCheckList'));
            } else {
              message.error(riskResult.message);
            }
          },
        });
      }
    });
  };

  render() {
    const { risk: { riskScreenDetails, riskLoading, riskHomeVisitLoading } } = this.props;
    const assetType = riskScreenDetails && riskScreenDetails.assetType == 1 ? '新车' : '二手车';
    const productContent = riskScreenDetails && riskScreenDetails.productName + `(${assetType})`;
    const { getFieldDecorator } = this.props.form;

    return (
      <PageHeaderLayout title="业务初筛" content={`所选产品：${productContent}`}>
        {/* {JSON.stringify(riskScreenDetails)} */}
        {riskLoading ? (
          <div className={styles.spinContainer}>
            <Spin size="large" />
          </div>
        ) : (
          <div>
            <CustomerList
              projectId={this.state.projectId}
              hindBusinessState={true}
              hideDocuments={false}
              hideThirdVerify={false}
              authorizedSignatureState={true} //是否显示授权书和签字照
              thirdPartyQuery={true} //只有业务初筛进去才能查询反欺诈和人行征信，其它只能看
            />

            <Card className={styles.preCheckFormCard}>
              <Form className={styles.preCheckForm}>
                <FormItem label="初筛意见" {...formItemLayout}>
                  {getFieldDecorator('resultCode', {
                    // initialValue: creditVerify.creditVerify,
                  })(
                    <RadioGroup>
                      <Radio value={1}>正常</Radio>
                      <Radio value={2}>关注</Radio>
                      <Radio value={3}>建议禁入</Radio>
                    </RadioGroup>
                  )}
                </FormItem>
                <FormItem label="意见说明" {...formItemLayout}>
                  {getFieldDecorator('content', {
                    // initialValue: creditVerify.creditVerify,
                  })(<TextArea rows={4} placeholder="请输入意见说明" />)}
                </FormItem>

                <FormItem
                  wrapperCol={{
                    xs: { span: 24, offset: 0 },
                    sm: {
                      span: formItemLayout.wrapperCol.span,
                      offset: formItemLayout.labelCol.span,
                    },
                  }}
                  label=""
                >
                  <Button
                    type="primary"
                    onClick={() => this.handleCommitScree(1)}
                    loading={riskHomeVisitLoading}
                  >
                    提交
                  </Button>
                  <Button
                    type="danger"
                    onClick={() => this.handleCommitScree(2)}
                    loading={riskHomeVisitLoading}
                    style={{ marginLeft: '30PX' }}
                  >
                    驳回
                  </Button>
                  <Button style={{ marginLeft: '30PX' }}>
                    <Link to="/risk/preCheckList">返回</Link>
                  </Button>
                </FormItem>
              </Form>
            </Card>
          </div>
        )}
      </PageHeaderLayout>
    );
  }
}
